<!DOCTYPE html>

<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <link rel="stylesheet" href="css/bootstrap.min.css">
  <script src="js/jquery-3.3.1.min.js" type="text/javascript"></script>
  <script src="js/bootstrap.min.js" type="text/javascript" ></script>
  <link rel="stylesheet" href="css/font-awesome.min.css">
  
<title>登陆</title>
<script>
  $(document).ready(function () {
    $("#btn").click(function () {
      var username = $("#username").val();
      var password = $("#password").val();
      $.post("login.php", {
        name: username,
        password: password
      },
      function (data) {
        if (data == 1) {
          alert("登陆成功");
        }
        else {
          alert("登陆失败");
        }
      });
    });
  });
</script>
<script>
  $(document).ready(function(){
    $.get("bing.php",function(data){
      $("body").css("background-image","url("+data+")");
    });
  });
</script>
<script src="js/nav.js" type="text/javascript" ></script>
</head>

<body>
  <div  style="height: 64px;background-color: #333333;">
    <div style="float:left;cursor:pointer;">
      <h2 style="color: white;line-height:60px;">Tan90</h2>
    </div>
    <div id="friends" style="background-color: #333333;height: 64px;width: 87px;float:right;cursor:pointer;border-radius:8px;">
      <div style="text-align:center;">
        <p style="color: white;line-height:60px;">友情链接</p>
      </div>
    </div >
    <div id="blog" style="background-color: #333333;height: 64px;width: 58px;float:right;cursor:pointer;border-radius:8px;">
      <div style="text-align:center;">
        <p style="color: white;line-height:60px;margin-top:0%;">博客</p>
      </div>
    </div >
    <div id="re" style="background-color: #333333;height: 64px;width: 58px;float:right;cursor:pointer;border-radius:8px;">
      <div style="text-align:center;">
        <p style="color: white;line-height:60px;">注册</p>
      </div>
    </div >
    <div id="login" style="background-color: #333333;height: 64px;width: 58px;float:right;cursor:pointer;border-radius:8px;">
      <div style="text-align:center;">
        <p style="color: white;line-height:60px;">登陆</p>
      </div>
    </div >
    <div id="index" style="background-color: #333333;height: 64px;width: 58px;float:right;cursor:pointer;border-radius:8px;">
      <div style="text-align:center;">
        <p style="color: white;line-height:60px;" >主页</p>
      </div>
    </div>
  </div>
  <div align="center">
    <h1 style="color: white;text-align:center;">登陆</h1>
  </div>
  <br>
  <br>
  <div class="shadow" style="background-color:white;width:375px;border-radius:10px;margin:20px auto;opacity: 0.88;">
    <br>
    <br>
    <div class="input-group" style="width: 300px;margin:20px auto;">
      <span class="input-group-text" style="width:37px;" >
        <i class="fa fa-user-o"></i>
      </span>
      <input id="username" type="text" class="form-control" placeholder="用户名" aria-describedby="basic-addon1">
    </div>
    <div class="input-group" style="width: 300px;margin:20px auto;">
      <span class="input-group-text" style="width:37px;">
        <i class="fa fa-key"></i>
      </span>
      <input id="password" type="password" class="form-control" placeholder="密码" aria-describedby="basic-addon1">
    </div>
    <div style="margin-left:10%;">
      <input type="checkbox"> 自动登陆
    </div>
    <div style="width: 300px;margin:20px auto;">
      <button id="btn" type="button" class="btn btn-success" style="width: 300px">登陆</button>
    </div>
    <div align="center">
      <a href="">忘记密码？</a>
    </div>
    <br>
    <br>
  </div>
</body>

</html>